<%--
  Created by IntelliJ IDEA.
  User: ldh
  Date: 2024/10/23
  Time: 10:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue--%>
    <script src="/js/vue.js"></script>
    <%--axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <%--elementui--%>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 必须在引入vue文件后 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-table
            :data="roles"
            border
            style="width: 100%;">
        <%--
           el-table-column: 表格列的标签
               prop: 绑定的数据的属性
               label: 列标题
               width: 列的宽度
        --%>
        <el-table-column
                prop="roleid"
                label="ID"
        >
        </el-table-column>
        <el-table-column
                prop="rolename"
                label="角色名"
        >
        </el-table-column>
        <el-table-column
                prop="remark"
                label="角色描述"
                >
        </el-table-column>
        <el-table-column
                prop="status"
                label="状态">
            <template slot-scope="scope">
                <el-tag
                        v-if="scope.row.status==1"
                        type="success"
                        effect="dark">
                    启用
                </el-tag>
                <el-tag
                        v-else
                        type="info"
                        effect="dark">
                    禁用
                </el-tag>
            </template>
        </el-table-column>
        <%--fixed:固定右边--%>
        <el-table-column
                fixed="right"
                label="操作"
        >
            <template slot-scope="scope">
                <el-button size="medium" type="success" >编辑<i
                        class="el-icon-setting el-icon--right"></i></el-button>
                <el-button size="medium" type="primary" @click="editRoleMenu(scope.row.roleid)">修改权限</el-button>
            </template>
        </el-table-column>
    </el-table>
    <%--分页组件el-pagination
          @size-change: 每页数据条数改变时会触发
          @current-change: 页码改变时会触发
          current-page: 当前页码
          page-sizes: 每页的数据个数选择器的选项设置
          page-size: 每页的数据条数
          layout: 分页布局
          total: 数据总数
 --%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,15,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <%--修改权限对话框开始--%>
    <el-dialog
            title="修改权限"
            :visible.sync="dialogVisible"
            width="30%"
           >
        <el-tree
                :data="data"
                show-checkbox
                node-key="mid"
                ref="tree"
                :default-checked-keys="defaultCheckedKeys"
                :props="defaultProps">
        </el-tree>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmRoleMenu">确 定</el-button>
  </span>
    </el-dialog>
    <%--修改权限对话框结束--%>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data:{
            data: [],//树形菜单数据
            defaultCheckedKeys:[],//默认选中的节点
            defaultProps: {
                children: 'children',
                label: 'mname'
            },
            roles:[],//角色列表
            total:0,//总记录数
            pageSize:5,//每页显示的条数
            currentPage:1,//当前页码
            dialogVisible:false,//修改权限对话框是否显示
            roleid:0,//角色id
        },
        created(){
            this.loadRoles();
        },
        methods:{
            //
            confirmRoleMenu(){
                //获取选中的节点
                let checkedKeys=this.$refs.tree.getCheckedKeys();
                axios.post("/menu/confirm?roleid="+this.roleid+"&checkKeys="+checkedKeys).then(resp=>{
                    if(resp.data.code===200){
                        this.$message({
                            type: 'success',
                            message: "分配菜单成功"
                        });
                        this.dialogVisible=false;
                    }
                })


            },
            //修改权限按钮事件
            editRoleMenu(roleid){
                this.roleid=roleid;
                this.dialogVisible=true;
                axios.get("/menu/listByRoleId?roleId="+roleid).then(resp=>{
                      this.data=resp.data.data.k1;
                      this.defaultCheckedKeys=resp.data.data.k2;
                })

            },

            //加载角色列表
            loadRoles(){
                //发送ajax请求，获取角色列表数据
                axios.get("/role/listByPage?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(resp=>{
                    this.roles=resp.data.data.list;
                    this.total=resp.data.data.total;
                })
            },
            handleSizeChange(val){
                this.pageSize=val;
                this.loadRoles();
            },
            handleCurrentChange(val){
                this.currentPage=val;
                this.loadRoles();
            }
        }
    })
</script>
</html>
